<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title th:replace="common/base::pagetitle"></title>
    <link th:replace="common/base::static"/>
    <link rel="stylesheet" th:href="@{/static/plugins/easyui/themes/material/easyui.css}">
    <link rel="stylesheet" th:href="@{/static/plugins/easyui/themes/icon.css}">
</head>
<body style="background-color: #f2f2f2;">
<div class="layui-form" style="padding: 20px 30px 0 0;">

    <div class="layui-form-item">
        <label class="layui-form-label">模板名称</label>
        <div class="layui-input-inline">
            <input type="text" name="name" lay-verify="required" th:value="${template!=null?template.name:''}" placeholder="请输入模板名称" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">模板描述</label>
        <div class="layui-input-inline">
            <input type="text" name="description" lay-verify="required" th:value="${template!=null?template.description:''}" placeholder="请输入模板描述" autocomplete="off" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item" th:style="${type==2?'display:none;':''}">
        <label class="layui-form-label">模板业务类型</label>
        <div class="layui-input-inline">
            <select name="templateTypeS"  th:lay-verify="${type==1?'required':''}"  lay-filter="templateTypeS">
                <option value="">请选择业务类型</option>
                <option th:each="dict:${dictList}" th:value="${dict.code}" th:text="${dict.name}"></option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">业务子类型</label>
        <div class="layui-input-inline">
            <select name="templateBtype" id="templateBtype" lay-filter="templateBtype" lay-verify="required">
                <option th:style="${type==1?'display:none;':''}" th:value="${template!=null?template.templateBtype:''}" th:text="${codeName}"></option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">JSON数据</label>
        <div class="layui-input-inline">
            <textarea name="templateData" style="height: 300px;width: 307px" th:text="${template!=null?template.templateData:''}" placeholder="请输入JSON格式数据" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit="" lay-filter="kFormSubmit" id="kFormSubmit" value="确认添加">
        <input type="hidden" id="type" th:value="${type}">
        <input type="hidden" name="id" th:value="${template!=null?template.id:''}">
    </div>
</div>


<script th:replace="common/base::context"></script>
<script th:replace="common/base::mainjs"></script>
<script th:src="@{/static/plugins/easyui/easyloader.js}"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(['form'], function () {
        var templateIsType = false;
        var $ = layui.$, form = layui.form;


        //监听提交
        form.on('submit(kFormSubmit)', function (data) {
            let type = document.getElementById("type").value;
            if(!templateIsType && type === 1){
                wlbKit.warningMsg("子类型已存在，请重新选择!")
                return;
            }
            var field = data.field; //获取提交的字段
                if (typeof field.templateData == 'string') {
                    try {
                        var obj=JSON.parse(field.templateData);
                        if(typeof obj == 'object' && obj ){
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            /*if (deptId) {
                                field.deptId = deptId;
                            }*/


                            //提交 Ajax 成功后，关闭当前弹层并重载表格
                            $.ajax({
                                type: req.type.post,
                                url: field.id ? api.template.templateEdit : api.template.templateAdd,
                                data: field,
                                async: false,
                                success: function (r) {
                                    if (r.code === req.status.ok) {
                                        parent.layui.table.reload('kContentTable'); //重载表格
                                        parent.layer.close(index); //再执行关闭
                                    } else {
                                        wlbKit.errorMsg(r.msg);
                                    }
                                }
                            });
                        }else{
                            wlbKit.warningMsg("请检查JSON格式是否正确！")
                            return false;
                        }

                    } catch(e) {
                        wlbKit.warningMsg("请检查JSON格式是否正确！")
                        return false;
                    }
                }


        });

        //监听模板类型获取子类型
        form.on('select(templateTypeS)', function (data) {
            if(!data.value){
                $("#templateBtype").empty();//清空下拉框的值
                let option1 = $("<option>").val('').text("请选择子类型");
                $("#templateBtype").append(option1);
                form.render('select');
                return;
            }
            $.ajax({
                type: req.type.get,
                url:api.template.templateDictData+"?code="+data.value + "_info",
                async: false,
                success: function (r) {
                    if(r.data!=null &&r.data.length>0){
                        let data = [];
                        data.push({code:'',name:"请选择子类型"})
                        for(let item of r.data){
                            data.push(item);
                        }
                        $("#templateBtype").empty();//清空下拉框的值
                        $.each(data, function(key, val) {
                            let option2 = $("<option>").val(val.code).text(val.name);
                            $("#templateBtype").append(option2);
                        });
                        // $("#templateBtype").get(0).selectedIndex=0;
                        form.render('select');
                    }else{
                        templateIsType = false
                        $("#templateBtype").empty();//清空下拉框的值
                        let option1 = $("<option>").val('').text("请选择子类型");
                        $("#templateBtype").append(option1);
                        form.render('select');
                        wlbKit.warningMsg("该模板没有子类型，请重新选择！");
                    }
                }
            });
            // $.ajax({
            //     type: req.type.get,
            //     url:api.template.templateByType + "?templateBtype="+data.value,
            //     async: false,
            //     success: function (r) {
            //         if (r.code === req.status.ok) {
            //             parent.layui.table.reload('kContentTable'); //重载表格
            //             parent.layer.close(index); //再执行关闭
            //         } else {
            //             wlbKit.errorMsg(r.msg);
            //         }
            //     }
            // });
        });

        //监听子类型选择查询是否存在该模板
        form.on('select(templateBtype)', function (data) {
            if(!data.value){
                return;
            }
            $.ajax({
                type: req.type.get,
                url:api.template.templateByType + "?templateBtype="+data.value,
                async: false,
                success: function (r) {
                    if (r.templateType === 1) {
                        wlbKit.warningMsg("该子类型已存在，请重新选择！");
                        templateIsType = false;
                    } else {
                        templateIsType = true;
                    }
                }
            });
        });


    })




</script>
</body>
</html>
